<template>
	<!-- 优惠券弹窗 -->
	<view class="wrapper"  >  
			<view class="content_view"  >
				<view class="title_view"> 
					<view class="title">优惠券</view> 
				</view> 
			</view> 
			<uv-tabs class="tabcon" :current='tabindex' :lineWidth='40' :scrollable='false' lineColor='#AD8539' :list="list" @click="tabclick"></uv-tabs>
			<view class="coucon" v-if="tabindex==0"> 
				<!-- <checkbox-group @change="checkboxChange"  v-if="usableList.length!=0">
					<block  v-for="(item, index) in usableLists" :key="item.id">
						<label class="couitem fx-row-sta"> 
							<view class="cou_le fx-col-c">
								<view class="mt20 ft32">￥<span style="font-size: 72rpx;">{{item.rmb}}</span></view>
								<view class="ft24">满{{item.overflow}}可用</view>
								<view class="label">{{item.typeName}}</view>
							</view>
							<view class="cou_ri fx-row-sb-c">
								<view class="fx-col-c" style="width: 350rpx;">
									<view>{{item.name}}</view>
									<view class="mt20 ft24 grey2">有效期{{item.beginDate}}~{{item.endDate}}</view>
								</view>
								<checkbox  class="round red" style="transform: scale(0.9)" color="#F73B34" :value="item.id" :checked="item.checked"></checkbox>
							</view>  
						</label>
					</block> 
				</checkbox-group> -->
				<!-- <view class="check act" v-if="item.checked">
					<uv-icon name="checkbox-mark" color="#fff"></uv-icon>
				</view>
				<view class="check " v-else></view> --> 
				<block   v-if="usableList.length!=0">
					<view class="couitem fx-row-sta"  v-for="(item, index) in usableLists" :key="item.id" @click="checkboxChange(item.id)"> 
						<view class="cou_le fx-col-c">
							<view class="mt20 ft32">￥<span style="font-size: 72rpx;">{{item.rmb}}</span></view>
							<view class="ft24">满{{item.overflow}}可用</view>
							<view class="label">{{item.typeName}}</view>
						</view>
						<view class="cou_ri fx-row-sb-c">
							<view class="fx-col-c" style="width: 350rpx;">
								<view>{{item.name}}</view>
								<view class="mt20 ft24 grey2">有效期{{item.beginDate}}~{{item.endDate}}</view>
							</view>
							<view class="check act" v-if="item.checked">
								<uv-icon name="checkbox-mark" color="#fff"></uv-icon>
							</view>
							<view class="check " v-else></view>  
							<!-- <checkbox  class="round red" style="transform: scale(0.9)" color="#F73B34" :value="item.id" :checked="item.checked"></checkbox> -->
						</view>  
					</view>
				</block>   
				<uv-empty v-else mode="coupon" text='没有可使用的优惠券' icon="https://cdn.uviewui.com/uview/empty/coupon.png"></uv-empty>  
			</view>
			<view class="coucon" v-if="tabindex==1">
				<radio-group style="opacity: .7;" v-if="noList.length!=0">
					<label class="couitem fx-row-sta" v-for="(item, index) in noList" :key="item.value"> 
						<view class="cou_le fx-col-c">
							<view class="mt20 ft32">￥<span style="font-size: 72rpx;">{{item.rmb}}</span></view>
							<view class="ft24">满{{item.overflow}}可用</view>
							<view class="label">{{item.typeName}}</view>
						</view>
						<view class="cou_ri fx-row-sb-c">
							<view class="fx-col-c" style="width: 350rpx;">
								<view>{{item.name}}</view>
								<view class="mt20 ft24 grey2">有效期{{item.beginDate}}~{{item.endDate}}</view>
							</view>
							<!-- <radio color="#FF3838" :value="item.id" :checked="index === current" ></radio> -->
						</view> 
					</label>
				</radio-group>
				<uv-empty v-else mode="coupon" text='没有不可使用的优惠券' icon="https://cdn.uviewui.com/uview/empty/coupon.png"></uv-empty>
			</view>
			<view class="sureCoupon">
				<view class="sure_btn" @click="sureCou">确认</view>
			</view>
	</view>
</template>

<script>  
import badgeMix from '@/common/mixins.js' 
	export default { 
		mixins: [badgeMix],
		props:['list','usableList','noList','couponOnlyId'],
		data() {
			return {
				list:[],
				usableLists:[],
				noList:[],
				current:'',
				onlyId:'', //优惠券唯一标识
				tabindex:0,
				couponId:''
			};
		},
		watch:{
			 usableList(newValue, oldValue) {  
				 console.log(newValue,this.couponOnlyId,'优惠券数据更新')
					for (let i = 0; i < newValue.length; i++) {
						this.$set(newValue[i],'checked',false)
						console.log(this.couponOnlyId,newValue[i].id,'onlyId是否相同，传，本')
						if (this.couponOnlyId == newValue[i].id) { 
								this.$set(newValue[i],'checked',true)
								this.couponId = newValue[i].id 
								this.onlyId = newValue[i].id;    
						} 
					}  
					this.usableLists = newValue 
				},  
				// couponOnlyId(newValue, oldValue) { 
				// 	this.usableLists = newValue  
				// },  
				// couponIndex(newValue, oldValue) {  
				// 	this.current = newValue
				// },  
				deep: true // 深度监听父组件传过来对象变化 
		},
		computed: {
			
		}, 
		onLoad() { 
			
		},
		methods:{  
			tabclick(item){ 
				this.tabindex = item.index
			}, 
			checkboxChange: function (id) { 
				for (let i = 0; i < this.usableLists.length; i++) { 
					if(!id){
						this.couponId = '';
						this.onlyId = ''; 
						return
					}
					if (id == this.usableLists[i].id) {   
						if(!this.usableLists[i].checked){ 
							this.$set(this.usableLists[i],'checked',true) 
							this.couponId = this.usableLists[i].id
							this.onlyId = this.usableLists[i].id;  
						}else{ 
							this.$set(this.usableLists[i],'checked',false) 
							this.couponId = ''
							this.onlyId = ''  
						} 
					}else{
						this.$set(this.usableLists[i],'checked',false) 
					}  
					this.$forceUpdate() 
				}   
			},
			radioChange: function(evt) { 
				console.log(evt);
				for (let i = 0; i < this.usableLists.length; i++) {  
					if (this.usableLists[i].onlyId === evt.detail.value) { 
							this.couponId = this.usableLists[i].id 
							this.current = i;  
							break;
					}
				}
			},
			// checkboxChange: function (e) { 
			// 	alert(JSON.stringify(e))
			// 	// this.$forceUpdate()
			// 	var values = []
			// 	const missingValues = e.detail.value.filter(item => !values.includes(item));  
			// 	values = e.detail.value;
			// 	const lastElement = [...values].pop();
			// 	console.log(values,lastElement);
			// 	alert(JSON.stringify(values)+"-"+JSON.stringify(missingValues)); 
			// 	// alert(JSON.stringify(lastElement));
			// 	for (let i = 0; i < this.usableLists.length; i++) {  
			// 		this.$set(this.usableLists[i],'checked',false) 
			// 		if(!missingValues){
			// 			this.couponId = '';
			// 			this.onlyId = ''; 
			// 			return
			// 		}
			// 		if (missingValues == this.usableLists[i].id) {  
			// 				this.$set(this.usableLists[i],'checked',true) 
			// 				this.couponId = this.usableLists[i].id 
			// 				this.onlyId = this.usableLists[i].id; 
			// 		} 
			// 		this.$forceUpdate() 
			// 	} 
			// 	// alert(JSON.stringify(this.usableLists));
			// },
			// radioChange: function(evt) { 
			// 	console.log(evt);
			// 	for (let i = 0; i < this.usableLists.length; i++) {  
			// 		if (this.usableLists[i].onlyId === evt.detail.value) { 
			// 				this.couponId = this.usableLists[i].id 
			// 				this.current = i;  
			// 				break;
			// 		}
			// 	}
			// },
			
			sureCou(){ 
				if(this.current==-1){  
					uni.showToast({
						title:'请选择可使用的优惠券',
						icon:'none'
					})
					return ;
				}
				console.log(this.onlyId,'回传'); 
				this.$emit('selectCuopon',this.couponId,this.onlyId)
			},
		},
		created() {

		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
// 不换行
@mixin no-wrap(){
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.wrapper{
	// z-index: 1999;
	// position: absolute;
	// top: -44px;
	// left: 0;
	// bottom: 0;
	// right: 0;
	.coucon{
		width: 700rpx;
		height: 690rpx;
		overflow-y: auto;
		padding: 25rpx;
		background-color: #F5F5F7;
		.couitem{
			width: 100%;
			height: 206rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			.cou_le{
				position: relative;
				width: 162rpx;
				height: 206rpx;
				background-color:#FEF5F2 ;
				text-align: center;
				color: #FE1B2B;
				.label{
					position: absolute;
					top: 0;
					left: 0;
					width: 148rpx;
					height: 44rpx;
					background: linear-gradient(90deg, #FEE6E2 0%, #FEF5F2 100%);
					border-radius: 20rpx 0rpx 0rpx 0rpx;
					line-height: 44rpx;
					font-size: 24rpx; 
				}
			}
			.cou_ri{
				width: 490rpx;
				padding:0 25rpx;
				font-size: 28rpx;
			}
		}
	}
	.sureCoupon{
		width: 670rpx;
		padding:25rpx 40rpx 50rpx 40rpx;
		background-color:#F5F5F7 ;
		.sure_btn{
			width: 670rpx;
			height: 88rpx;
			background-color: $uni-main;
			border-radius: 50rpx;
			font-size: 36rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
		}
	}
	.tabcon{
		width: 100%;
	}
	.content_view{
		// z-index: 999;
		// background: white;
		// position: absolute;
		// height: 744rpx;
		// left: 0;
		// bottom: 0;
		// right: 0;
		// border-top-left-radius: 6px;
		// border-top-right-radius: 6px;
		.title_view{
			position: relative;
			height: 124rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $uni-spacing-row-sm;
			.finish{
				position: absolute;
				left: 30rpx;
				font-size: 28rpx;
				color: $uni-main;
			}
			.title{
				width: 100%;
				text-align: center;
				font-size: uni-font-size-sm;
			}
			.close_view{
				position: absolute;
				right: 20rpx;
				height: 60px;
				width: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}  
	}
	.mask{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: $uni-text-color-grey;
		opacity: 0.7;
	}
}
.check{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #C4C7CC;
	border-radius: 50%;
}
.act{
	border: 2rpx solid #F73B34;
	background-color: #F73B34;
}
.item-title{
	height: 100rpx;
	padding: 0 28rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	border-bottom: 1rpx solid #E6E6E6;
}
.active{
	color: $uni-main;
}
.content-enter{
  transform: translateY(100%);
}
.content-enter-to{
  transform: translateY(0%);
}
.content-enter-active{
  transition: transform 0.5s;
}
.content-leave{
  transform: translateY(0%);
}
.content-leave-to{
  transform: translateY(100%);
}
.content-leave-active{
  transition: transform 0.5s;
} 
</style>
